<template>
    <div class="goods-item"  @click="clickGoodsItem">
        <img v-lazy ="goodsImage" alt="" @load="imgLoaded">
        <div>
            <p class="goods-info">{{goodsItem.title}}</p>
            <!-- <span class="iconfont icon-jiageprice1"></span> -->
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiageprice1"></use></svg>
            <span class="goods-price">{{goodsItem.price}}</span>
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shoucang"></use></svg>
            <span class="goods-cfav">{{goodsItem.cfav}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            goodsItem:{
                type:Object,
                default(){
                    return {}
                }
            }
        },
        methods:{
            imgLoaded(){
                const title = this.$route.path
                if(title.indexOf('/home')!=-1){
                    this.$bus.$emit('homeImgLoaded') //提交到事件总线
                }else{
                    this.$bus.$emit('detailImgLoaded') //提交到事件总线
                }
                
            },
            clickGoodsItem(){
                this.$router.push('/detail/'+this.goodsItem.iid)
            }
        },
        computed:{
            goodsImage(){
                return this.goodsItem.image || this.goodsItem.show.img
            }
        }

    }
</script>

<style scoped>
    .goods-item{
        width: 45%;
        padding-bottom: 5px;
    }
    .goods-item img{
        width: 100%;
        border-radius: 5px;
    }
    .goods-info{
        font-size: 12px;
        overflow:hidden;
        display:-webkit-box;
        /* 设置为2行溢出 */
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
    }
    .goods-price{
        font-size: 14px;
        color: var(--color-high-text);
        display: inline-block;
        margin-right: 10px;
    }
    .goods-cfav{
        font-size: var(--font-size);
        color: #f39c12;
    }


</style>